import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class BasicWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("基础组件"),
        ),
        /*
      body的组件树中包含了一个Center 组件，Center 可以将其子组件树对齐到屏幕中心。此例中， Center 子组件是一个Column 组件，Column的作用是将其所有子组件沿屏幕垂直方向依次排列；
       */
        body: ListView(
          children: <Widget>[
            TextRichWidget(),
//            ProgressWidget(),
//            EditTextWidget(),
            TextWidget(),
            ButtonWidget(),
            ImgWidget(),
//            CheckWidget(),
          ],
        ));
  }
}

class ProgressWidget extends StatelessWidget {
  /*
  LinearProgressIndicator是一个线性、条状的进度条
  LinearProgressIndicator({
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
  ...
})
   */
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        // 模糊进度条(会执行一个动画)
        LinearProgressIndicator(
          backgroundColor: Colors.grey,
          //对进度条应用一种固定的颜色，此时我们可以通过AlwaysStoppedAnimation来指定。
          valueColor: AlwaysStoppedAnimation(Colors.blue),
        ),
        LinearProgressIndicator(
          backgroundColor: Colors.grey,
          //对进度条应用一种固定的颜色，此时我们可以通过AlwaysStoppedAnimation来指定。
          valueColor: AlwaysStoppedAnimation(Colors.red),
          value: .5,
        ),

        CircularProgressIndicator(
          backgroundColor: Colors.grey,
          //对进度条应用一种固定的颜色，此时我们可以通过AlwaysStoppedAnimation来指定。
          valueColor: AlwaysStoppedAnimation(Colors.blue),
          strokeWidth: 10,
        )
      ],
    );
  }
}


class EditTextWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return EditTextWidgetState();
  }
}

class EditTextWidgetState extends State<EditTextWidget> {
  final _editingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _editingController.addListener(() => print(_editingController.text));
  }

  /*
  const TextField({
  ...
  TextEditingController controller, //编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。
  如果没有提供controller，则TextField内部会自动创建一个
  FocusNode focusNode,//用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个句柄
  InputDecoration decoration = const InputDecoration(),//用于控制TextField的外观显示，如提示文本、背景颜色、边框等
  TextInputType keyboardType,//用于设置该输入框默认的键盘输入类型
text	文本输入键盘
multiline	多行文本，需和maxLines配合使用(设为null或大于1)
number	数字；会弹出数字键盘
phone	优化后的电话号码输入键盘；会弹出数字键盘并显示“* #”
datetime	优化后的日期输入键盘；Android上会显示“: -”
emailAddress	优化后的电子邮件地址；会显示“@ .”
url	优化后的url输入键盘； 会显示“/ .”

  TextInputAction textInputAction,//键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值
  TextStyle style,//正在编辑的文本样式
  TextAlign textAlign = TextAlign.start,//输入框内编辑文本在水平方向的对齐方式
  bool autofocus = false,//是否自动获取焦点
  bool obscureText = false,//是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换
  int maxLines = 1,//输入框的最大行数，默认为1；如果为null，则无行数限制
  int maxLength,//代表输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数
  bool maxLengthEnforced = true,//决定当输入文本长度超过maxLength时是否阻止输入，为true时会阻止输入，为false时不会阻止输入但输入框会变红
  ValueChanged<String> onChanged,//输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听
  VoidCallback onEditingComplete, //在输入框输入完成时触发
  ValueChanged<String> onSubmitted, //在输入框输入完成时触发
  List<TextInputFormatter> inputFormatters,//用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验
  bool enabled,//如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）

  这三个属性是用于自定义输入框光标宽度、圆角和颜色的
  this.cursorWidth = 2.0,
  this.cursorRadius,
  this.cursorColor,
  ...
})
   */
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          autofocus: true,
          decoration: InputDecoration(
              labelText: "用户名",
              hintText: "请输入用户名",
              prefixIcon: Icon(Icons.person)),
          cursorColor: Colors.red,
          maxLines: 1,
          controller: _editingController,
        ),
        TextField(
          decoration: InputDecoration(
              labelText: "密码", hintText: "请输入密码", prefixIcon: Icon(Icons.lock)),
          cursorColor: Colors.green,
          cursorWidth: 10,
          maxLines: 1,
          maxLength: 6,
          maxLengthEnforced: true,
          keyboardType: TextInputType.visiblePassword,
          //这个没什么用
          obscureText: true,
          onChanged: (value) => print(value),
        ),
        Text(_editingController.text),
      ],
    );
  }
}

class CheckWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CheckWidgetState();
  }
}

class _CheckWidgetState extends State<CheckWidget> {
  bool _switchSelected = true; //维护单选开关状态
  bool _checkboxSelected = true; //维护复选框状态

  /*
  Checkbox的大小是固定的，无法自定义，而Switch只能定义宽度，高度也是固定的。值得一提的是Checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，
  这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false 。如果tristate值为true时，value的值会增加一个状态null
   */
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Checkbox(
          value: _checkboxSelected,
          onChanged: (value) => setState(() => _checkboxSelected = value),
        ),
        Switch(
            activeColor: Colors.red, //选中时的颜色
            value: _switchSelected,
            onChanged: (value) => setState(() => _switchSelected = value)),
      ],
    );
  }
}

class ImgWidget extends StatelessWidget {
  /*
  const Image({
  ...
  this.width, //图片的宽
  this.height, //图片高度
  this.color, //图片的混合色值
  this.colorBlendMode, //混合模式
  this.fit,//缩放模式
  this.alignment = Alignment.center, //对齐方式
  this.repeat = ImageRepeat.noRepeat, //重复方式
  ...
})
fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
Flutter框架对加载过的图片是有缓存的（内存），默认最大缓存数量是1000，最大缓存空间为100M
   */
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //两种从asset中加载图片方式
        Image(
            image: AssetImage("assets/image/ic_launcher.png"),
            width: 100,
            height: 100),

        Image.asset(
          'assets/image/ic_launcher.png',
          width: 100,
          height: 50,
          fit: BoxFit.fitWidth,
          alignment: Alignment.topCenter,
        ),
//        Image(
//            image: NetworkImage(
//                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=20577780,3476556477&fm=26&gp=0.jpg"),
//            width: 100,
//            height: 100),
//        Image.asset("assets/ic_launcher.png", width: 100, height: 100),
        Image.network(
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=20577780,3476556477&fm=26&gp=0.jpg",
            fit: BoxFit.fitWidth,
            width: 100,
            height: 50),
        FadeInImage(
          //占位图，渐入渐出效果
          //缓存默认1000张，最大内存100M
          fadeInDuration: Duration(seconds: 3),
          placeholder: AssetImage('assets/image/ic_launcher.png'),
          image: NetworkImage(
              "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=20577780,3476556477&fm=26&gp=0.jpg"),
          width: 200,
          height: 200,
        ),
        //字体图标和图片图标
        //1.图标矢量图放大和缩小不会失真
        //2.可以设置颜色
        //3.图标很多，占据空间更小
        Icon(
          Icons.ac_unit,
          //ac_unit = IconData(0xeb3b, fontFamily: 'MaterialIcons');
          size: 200,
          color: Colors.blueAccent,
        ),
        //字体图标的另一种写法:Text实现
        Text(
          '\ue190',//IconData(0xe190, fontFamily: 'MaterialIcons');
          style: TextStyle(
              fontSize: 200, fontFamily: 'MaterialIcons', color: Colors.amber),
        ),
      ],
    );
  }
}

class ButtonWidget extends StatelessWidget {
  void _onPressed() {
    print("点击。。。");
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          color: Colors.yellow,
          highlightColor: Colors.redAccent,
          onPressed: _onPressed,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[Icon(Icons.send), Text('发送1')],
          ),
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
        ),
        RaisedButton.icon(
          icon: Icon(Icons.send),
          label: Text("发送2"),
          onPressed: _onPressed,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
        ),
        OutlineButton.icon(
          icon: Icon(Icons.add),
          label: Text("添加"),
          onPressed: _onPressed,
        ),
        /*
        const FlatButton({
  ...
  @required this.onPressed, //按钮点击回调
  this.textColor, //按钮文字颜色
  this.disabledTextColor, //按钮禁用时的文字颜色
  this.color, //按钮背景颜色
  this.disabledColor,//按钮禁用时的背景颜色
  this.highlightColor, //按钮按下时的背景颜色
  this.splashColor, //点击时，水波动画中水波的颜色
  this.colorBrightness,//按钮主题，默认是浅色主题
  this.padding, //按钮的填充
  this.shape, //外形
  @required this.child, //按钮的内容
})
         */
        FlatButton.icon(
          icon: Icon(Icons.info),
          label: Text("详情"),
          onPressed: _onPressed,
        ),
        IconButton(
          icon: Icon(Icons.thumb_up),
          onPressed: _onPressed,
        ),
        //自定义Button
        ButtonTheme(
          minWidth: 50,
          height: 30,
          child: FlatButton(
            color: Colors.greenAccent,
            //清除button自带的边距
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            onPressed: _onPressed,
            child: Text('xxxxxxxxxxxxxxxxx'),
          ),
        ),
      ],
    );
  }
}

class TextRichWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /*
    const TextSpan({
  TextStyle style,
  Sting text,
  List<TextSpan> children,
  GestureRecognizer recognizer,
});
     */
    return Text.rich(TextSpan(children: [
      TextSpan(text: "dddddd"),
      WidgetSpan(
          child: Icon(
        Icons.favorite,
        color: Colors.pink,
      )),
      TextSpan(
        text: "https://flutterchina.club",
        style: TextStyle(
            color: Colors.blue,
            decoration: TextDecoration.underline,
            decorationColor: Colors.blue),
      ),
    ]));
  }
}

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "hello world" * 6, //字符串重复5次
      textAlign: TextAlign.center,
      //文本的对齐方式；可以选择左对齐、右对齐还是居中。注意，对齐的参考系是Text widget本身。
      //指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      textScaleFactor: 1.0,
      //代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。
      // 该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery，那么会默认值将为1.0
      style: TextStyle(
          color: Colors.lightBlue,
          /*
          该属性和Text的textScaleFactor都用于控制字体大小。但是有两个主要区别：
fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。
textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。
           */
          fontSize: 18.0,
          //该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height
          height: 1.2,
          //由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下
          fontFamily: "Courier",
          background: new Paint()..color = Colors.yellow,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.dashed),
    );
  }
}
